<template>
  <con-view :loading="loading" :body-style="{ height: '100%'}">
    <flex-box mode="column" align-items="stretch" class="create-container">
      <flex-box class="create-header">
        <span class="title">合同信息</span>
        <img class="close" src="/image/close.png" @click="handleClose">
      </flex-box>
      <div class="create-flex">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item name="basicInfo">
            <template slot="title">
              <span>基本信息</span>
              <i class="header-icon el-icon-info"/>
            </template>
            <el-form :model="model" ref="elForm" :rules="rules" :inline="true" size="mini" label-width="125px">
              <el-row :gutter="24" class="form-item-group">
                <el-col :span="8">
                  <el-form-item label="费率类型" prop="saleBuyType">
                    <el-select v-model="model.saleBuyType" size="mini" style="width: 92.2%;" clearable>
                      <el-option v-for="option in $constant.saleBuyTypeList" :key="option.key" :label="option.label" :value="option.key" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-if="model.saleBuyType === 'sale'" :span="8">
                  <el-form-item label="托运人" prop="customerName">
                    <el-input v-model="model.customerName" class="filter-item">
                      <i slot="suffix" class="el-input__icon el-icon-search" @click="openCustomerSelector" />
                    </el-input>
                    <customer-selector :visible.sync="customerSelectorVisible" @selected="handleCustomerSelected" />
                  </el-form-item>
                </el-col>
                <el-col v-if="model.saleBuyType === 'buy'" :span="8">
                  <el-form-item label="承运人" prop="carrierName">
                    <el-input v-model="model.carrierName" class="filter-item">
                      <i slot="suffix" class="el-input__icon el-icon-search" @click="openCarrierSelector" />
                    </el-input>
                    <carrier-selector :visible.sync="carrierSelectorVisible" @selected="handleCarrierSelected" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同编号" prop="contractNo">
                    <el-input v-model="model.contractNo" placeholder="请输入合同编号"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="合同名称" prop="contractName">
                    <el-input v-model="model.contractName" placeholder="请输入合同名称"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-collapse-item>
          <el-collapse-item name="itemInfo">
            <template slot="title">
              <span>明细信息</span>
              <i class="header-icon el-icon-info"/>
            </template>
            <el-button type="primary" style="margin-top: 6px; margin-bottom: 1px;" size="mini" @click="handleItemFormDisplay">新增费率</el-button>
            <el-button v-if="itemDisplay" type="primary" style="margin: 6px 0px 0px 5px; margin-bottom: 1px;" size="mini" @click="handleItemSave">保存</el-button>
            <el-card v-if="itemDisplay" class="box-card">
              <el-form ref="itemForm" :model="itemData" :inline="true" size="mini" label-width="125px">
                <el-row :gutter="24" class="form-item-group">
                  <el-col :span="8">
                    <el-form-item size="mini" label="运单类型">
                      <el-select v-model="itemData.surviceType" filterable clearable>
                        <el-option v-for="item in $constant.freightOrderTypeList" :key="item.key" :label="item.label" :value="item.key" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item size="mini" label="路线类型">
                      <el-select v-model="itemData.routeDistanceType" filterable clearable>
                        <el-option v-for="item in $constant.routeDistanceTypeList" :key="item.key" :label="item.label" :value="item.key" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.saleBuyType === 'buy'" :span="8">
                    <el-form-item label="是否多司机">
                      <el-input v-model="itemData.teamYn" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.surviceType === 'LTL'" :span="8">
                    <el-form-item size="mini" label="结费类型">
                      <el-select v-model="itemData.chargeAdjustType" filterable clearable>
                        <el-option v-for="item in $constant.chargeAdjustTypeList" :key="item.key" :label="item.label" :value="item.key" />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col v-if="itemData.routeDistanceType === 'mile'" :span="8">
                    <el-form-item label="出发地">
                      <el-cascader
                        v-model="itemData.dptrAreaCdIdList"
                        :options="locationList"
                        :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.routeDistanceType === 'mile'" :span="8">
                    <el-form-item label="到货地">
                      <el-cascader
                        v-model="itemData.arrAreaCdIdList"
                        :options="locationList"
                        :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.routeDistanceType === 'zone'" :span="8">
                    <el-form-item label="区域">
                      <el-input v-model="itemData.zoneCdNm" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.chargeAdjustType === 'weight'" :span="8">
                    <el-form-item label="重量区间起">
                      <el-input v-model="itemData.wtFr" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.chargeAdjustType === 'weight'" :span="8">
                    <el-form-item label="重量区间至">
                      <el-input v-model="itemData.wtTo" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="itemData.chargeAdjustType === 'weight'" :span="8">
                    <el-form-item label="重量单位">
                      <el-input v-model="itemData.wtUnitName" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="车辆类型">
                      <el-input v-model="itemData.vehicleType" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最低价">
                      <el-input v-model="itemData.minAmt" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="最高价">
                      <el-input v-model="itemData.maxAmt" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="金额">
                      <el-input v-model="itemData.basicAmt" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="加急费">
                      <el-input v-model="itemData.driverHotDeliverRate" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="到门费">
                      <el-input v-model="itemData.doortodoorFee" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="现金折扣">
                      <el-input v-model="itemData.paycashDiscountRate" type="number" size="mini" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="货物：">
                      <el-input v-model="itemData.cargoFreightSpec" class="filter-item" disabled>
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialSelector" />
                      </el-input>
                    </el-form-item>
                    <warehouse-customer-selector :visible.sync="materialSelectorVisible" :customer-no="model.customerNo" @selected="handleMaterialSelected" />
                  </el-col>
                </el-row>
              </el-form>
            </el-card>
            <el-table :data="model.routePriceNewList" border stripe fit highlight-current-row>
              <el-table-column label="操作" align="center" fixed="left" width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleItemEdit(scope.row)">修改</el-button>
                  <el-button type="text" @click="handleItemDelete(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
              <el-table-column label="运单类型" width="125" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.surviceType" disabled placeholder="">
                    <el-option v-for="item in $constant.freightOrderTypeList" :key="item.key" :label="item.label" :value="item.key" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="路线类型" width="125" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.routeDistanceType" disabled placeholder="">
                    <el-option v-for="item in $constant.routeDistanceTypeList" :key="item.key" :label="item.label" :value="item.key" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="交易产品单位" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否多司机" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.teamYn }}</span>
                </template>
              </el-table-column>
              <el-table-column label="结费类型" width="125" align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.chargeAdjustType" disabled placeholder="">
                    <el-option v-for="item in $constant.chargeAdjustTypeList" :key="item.key" :label="item.label" :value="item.key" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="出发地" width="300" align="center">
                <template slot-scope="scope">
                  <el-cascader
                    v-model="scope.row.dptrAreaCdIdList"
                    :options="locationList"
                    :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                    disabled
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="到货地" width="300" align="center">
                <template slot-scope="scope">
                  <el-cascader
                    v-model="scope.row.arrAreaCdIdList"
                    :options="locationList"
                    :props="{ expandTrigger: 'hover', label: 'locationName', value: 'id' }"
                    disabled
                    placeholder=""
                  />
                </template>
              </el-table-column>
              <el-table-column label="区域" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.zoneCdNm }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量区间起" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.wtFr }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量区间至" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.wtTo }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量单位" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.wtUnitName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="车辆类型" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.vehicleType }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最低价" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.minAmt }}</span>
                </template>
              </el-table-column>
              <el-table-column label="最高价" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.maxAmt }}</span>
                </template>
              </el-table-column>
              <el-table-column label="金额" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.basicAmt }}</span>
                </template>
              </el-table-column>
              <el-table-column label="加急费" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.driverHotDeliverRate }}</span>
                </template>
              </el-table-column>
              <el-table-column label="到门费" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.doortodoorFee }}</span>
                </template>
              </el-table-column>
              <el-table-column label="现金折扣" width="125" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.doortodoorFee }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="handle-bar">
        <el-button class="handle-button" @click.native="handleClose">取消</el-button>
        <el-button class="handle-button" type="primary" @click.native="handleSubmit">提交</el-button>
      </div>
    </flex-box>
  </con-view>
</template>

<script>
import SaveMixin from '@/mixins/Save'
import CustomerSelector from '@/views/basic/customer/CustomerSelector'
import CarrierSelector from '@/views/basic/carrier/CarrierSelector'
import ConContractApi from '@/api/contract/ConContractApi'
import LocationApi from '@/api/basic/LocationApi'
import TreeUtils from '@/utils/TreeUtils'
import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'

const defaultItemData = {
  surviceType: null,
  routeDistanceType: null,
  teamYn: null,
  chargeAdjustType: null,
  dptrAreaCdIdList: null,
  arrAreaCdIdList: null,
  zoneCdNm: null,
  wtFr: null,
  wtTo: null,
  wtUnitName: null,
  dangerType: null,
  minAmt: null,
  maxAmt: null,
  basicAmt: null,
  driverHotDeliverRate: null,
  doortodoorFee: null,
  paycashDiscountRate: null
}
export default {
  name: 'CustomerSave',
  mixins: [SaveMixin],
  components: {
    CustomerSelector,
     WarehouseCustomerSelector,
    CarrierSelector
  },
  props: {
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '合同信息',
      activeNames: [
        'basicInfo',
        'itemInfo'],
      locationList: [],
      model: {
        id: null,
        saleBuyType: null,
        customerNo: null,
        customerName: null,
        carrierNo: null,
        carrierName: null,
        contractNo: null,
        contractName: null,
        routePriceNewList: []
      },
      itemData: {},
      rules: {
        saleBuyType: [{ required: true, message: '费率类型不能为空', trigger: 'blur' }],
        contractNo: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
        contractName: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }]
      },
      itemDisplay: false,
      customerSelectorVisible: false,
        materialSelectorVisible: false,
      carrierSelectorVisible: false,
      loading: false
    }
  },
  created() {
    this.loadOptions()
    if (this.id) {
      this.getDetail()
    }
  },
  methods: {
    loadOptions() {
      LocationApi.list().then(response => {
        this.locationList = TreeUtils.list2Tree(response.data)
      })
    },
    handleSubmit() {
      this.$refs['elForm'].validate(valid => {
        if (valid) {
          if (this.model.id) {
            ConContractApi.update(this.model).then(response => {
              this.$message.success('修改成功')
              this.handleCallback()
              this.handleClose()
            })
          } else {
            ConContractApi.add(this.model).then(response => {
              this.$message.success('添加成功')
              this.handleCallback()
              this.handleClose()
            })
          }
        }
      })
    },
    handleItemFormDisplay() {
      this.itemDisplay = !this.itemDisplay
      if (this.itemDisplay) {
        this.itemData = Object.assign({}, defaultItemData)
        this.model.routePriceNewList.push(this.itemData)
      }
    },
    handleItemSave() {
      this.itemData = {}
      this.itemDisplay = false
    },
    openMaterialSelector() {
      this.materialSelectorVisible = true
    },
    handleMaterialSelected(obj) {
      this.itemData = {
        cargoFreightSpec: obj.id

      //  orderQuantity: obj.orderQuantity
      }
    },
    handleItemEdit(item) {
      this.itemData = item
      this.itemDisplay = true
    },
    handleItemDelete(index) {
      this.model.routePriceNewList.splice(index, 1)
    },
    openCustomerSelector() {
      this.customerSelectorVisible = true
    },
    handleCustomerSelected(obj) {
      this.model.customerNo = obj.id
      this.model.customerName = obj.customerName
    },
    openCarrierSelector() {
      this.carrierSelectorVisible = true
    },
    handleCarrierSelected(obj) {
      this.model.carrierNo = obj.id
      this.model.carrierName = obj.carrierName
    },
    handleChange(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.create-container {
  position: relative;
  height: 100%;

  .create-header {
    height: 40px;
    margin-bottom: 20px;
    padding: 0 10px;
    flex-shrink: 0;

    .title {
      flex: 1;
      font-size: 17px;
      font-weight: bold;
      color: #333;
    }

    .close {
      display: block;
      width: 40px;
      height: 40px;
      margin-right: -10px;
      padding: 10px;
      cursor: pointer;
    }
  }

  .create-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;

    .create-item {
      flex: 0 0 50%;
      flex-shrink: 0;
      // overflow: hidden;
      padding-bottom: 10px;
    }

    .create-item2 {
      flex: 0 0 100%;
      flex-shrink: 0;
      // overflow: hidden;
      padding-bottom: 10px;
    }

    .create-block-item {
      flex: 0 0 100%;
      flex-shrink: 0;
      padding-bottom: 10px;
    }

    .create-item-label {
      margin: 5px 0;
      font-size: 14px;
      word-wrap: break-word; // 允许长单词换行
      word-break: break-all; // 允许在单词内换行
      .create-item-label-tips {
        font-size: 12px;
        padding-left: 2px;
        color: #999;
      }
    }
  }

  .create-flex {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
  }

  .create-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .left {
    padding-right: 10px;
  }

  .right {
    padding-left: 10px;
  }
}

// 使选择器能够作用得“更深”，例如影响子组件
.el-form ::v-deep .el-form-item {
  margin-bottom: 0px;
}

.el-form-item ::v-deep .el-form-item__label {
  line-height: normal;
  font-size: 12px;
  font-weight: normal;
  color: #333333;
  position: relative;
  padding-left: 8px;
  padding-bottom: 0;
}

.el-form ::v-deep .el-form-item.is-required .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
  position: absolute;
  left: 0;
  top: 5px;
}

.handle-bar {
  position: relative;

  .handle-button {
    float: right;
    margin-top: 5px;
    margin-right: 20px;
  }
}

.el-button + .el-button {
  margin-left: 0;
}

::v-deep .el-button {
  line-height: 0.5;
}

.distpicker-address-wrapper ::v-deep select {
  height: 34px;
  font-size: 12px;
  border-radius: 0.1rem;
}

::v-deep .el-collapse-item__header {
  color: #fff;
  background-color: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
  padding: 0 10px;
  margin-bottom: 1px;
  height: 34px;
  line-height: 34px;
}

::v-deep .el-divider--horizontal {
  margin: 2px 0;
}

::v-deep .el-collapse-item__content {
  padding-bottom: 2px;
}

::v-deep .el-row {
  margin-top: 5px;
}
</style>
